import { Tabs } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
const About = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const foods = [
        {
            label: `主菜`,
            key: "/category/mainfood",
        },
        {
            label: `汤品`,
            key: "/category/soup",
        },
        {
            label: `甜点与烘焙`,
            key: "/category/bake",
        },
        {
            label: '饮品',
            key: "/category/beverage",
        }
    ]

    return (
        <div>
            <Tabs
                defaultActiveKey={location.pathname}
                centered
                items={foods}
                style={{
                    fontWeight: "bold",
                    fontFamily: "幼圆"
                }}
                onChange={(e) => navigate(e)}
            />
            <Outlet></Outlet>
        </div>
    )
}

export default About